<template>
  <div v-cloak>
    <el-form
      :model="ebook"
      ref="ebook"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="电子书名称" prop="ebook_title">
        <el-col :span="11">
          <el-input v-model="ebook.ebook_title"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="作者" prop="ebook_author">
        <el-col :span="11">
          <el-input v-model="ebook.ebook_author"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="电子书类别" prop="type_id" v-if="types">
        <el-col :span="11">
          <el-select v-model="ebook.type_id">
            <el-option
              v-for="(item, index) in types"
              :key="index"
              :label="item.type_title"
              :value="item.type_id"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item label="标签">
        <el-col :span="11">
          <el-tag
            :key="index"
            v-for="(tag, index) in ebook.tags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ New Tag</el-button
          >
        </el-col>
      </el-form-item>

      <el-form-item label="书籍简介" prop="ebook_eintro">
        <el-col :span="11">
          <el-input type="textarea" v-model="ebook.ebook_eintro"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="作者简介" prop="ebook_aintro">
        <el-col :span="11">
          <el-input type="textarea" v-model="ebook.ebook_aintro"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="发布时间" prop="ebook_ctime">
        <el-col :span="11">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="ebook.ebook_ctime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </el-col>
      </el-form-item>

      <el-form-item label="ISBN" prop="ebook_ISBN">
        <el-col :span="11">
          <el-input v-model="ebook.ebook_ISBN" ></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="封面">
        <el-col :span="5">
          <el-upload
            ref="ebookCover"
            class="avatar-uploader"
            :action="`${$http.defaults.baseURL}/update_ebook_cover`"
            :on-success="afterUpload"
            :on-error="coverUpErr"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="ebook.ebook_cover"
              :src="ebook.ebook_cover"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-form-item>

      <el-form-item label="电子书资源" prop="ebook_url">
        <el-col :span="4">
          <el-upload
            ref="ebookURI"
            :action="`${$http.defaults.baseURL}/upload_ebook_uri`"
            accept=".epub"
            :on-success="epubUpSuc"
            :on-error="epubUpErr"
            :auto-upload="false"
            :data="{ebook_id}"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传epub文件，且不超过30MB
            </div>
          </el-upload>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

export default {
  data() {
    return {
        ebook:{tags:[]},
        dynamicTags: ["标签一", "标签二", "标签三"],
        inputVisible: false,
        inputValue: "",
        types:[],
        ebook_id:''
    }
  },
  async created(){
    let res = await this.$http.get('/get_ebook_types')
    this.types = res.data
  },
  watch:{ 
    ebook_id(newVal){
      console.log("调用了watch");
    }
  },
  methods: {
    // epub上传失败回调
    epubUpErr(){
      console.log('epub上传失败回调');
    },
    // epub上传成功回调
    epubUpSuc(){
      console.log('epub上传成功回调');
    },
    coverUpErr(){
        console.log('封面上传失败回调');
    },
    coverUpSuc(){
      console.log('封面上传成功回调');
    },
    afterUpload(res){
      // 显示设置personInfo的 user_cover值
      this.$set(this.ebook, 'ebook_cover', res.url)
    },
    handleClose(tag) {
      this.ebook.tags.splice(this.ebook.tags.indexOf(tag), 1);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
      showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.ebook.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    async submitForm() {
      // console.log(this.$refs.ebookCover);
      
      this.ebook.ebook_tag = this.ebook.tags?this.ebook.tags.join(','):'';
       console.log(this.ebook);
       let res = await this.$http.post('/insert_ebook', {ebook:this.ebook})
       this.ebook_id = res.data[0].ebook_id;
      var that = this;
      this.$nextTick(()=>{
         console.log(this.ebook_id);
        console.log(this.$refs.ebookURI)
        that.$refs.ebookURI.submit()
      })
     
      this.$message({
        type:'success',
        message:"创建成功"
      })
      this.$router.push('/ebooksManage/ebookList');
    },
    resetForm() {
      this.ebook = {}
      this.$refs.ebookCover.clearFiles();
      this.$refs.ebookURI.clearFiles();
    },
  },
  beforeUpdate(){
    console.log("before update");
  },
  updated(){
    console.log("after update");
  },
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.component-item {
  margin-top: 100px;
}
.code-part {
  margin-top: 20px;
}
.avatar-uploader-icon {
  border: 1px dashed #898989;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
